<template>
  <el-row class="h-[100vh] items-center" :gutter="0">
    <el-col class="hidden-sm-and-down" :md="12" :lg="13">
      <h2 class="text-center text-4xl">欢迎进入 Skyline 后台</h2>
      <img class="image" src="@/assets/images/illustration_dashboard.png" />
    </el-col>
    <el-col class="p-24" :md="12" :lg="11">
      <h3 class="text-2xl mb-4">登录进入 Skyline</h3>
      <p class="text-base mb-8">没有用户？<el-link type="primary">创建一个用户</el-link></p>
      <p class="mb-4">
        <el-alert title="用户邮箱：lewo@bilibili.com / password：123456" type="info" />
      </p>
      <p class="mb-4">
        <LabelInput v-model="username" label="用户名" />
      </p>
      <p class="mb-4">
        <LabelInput v-model="password" label="密码" :type="isShowPassword ? 'text' : 'password'">
          <template #icon>
            <el-icon @click="onPasswordToggle">
              <View v-if="isShowPassword" /> <Hide v-else />
            </el-icon>
          </template>
        </LabelInput>
      </p>
      <p class="mb-4 text-right">
        <el-link type="primary">忘记密码？</el-link>
      </p>
      <p class="mb-4">
        <el-button
          class="w-full"
          size="large"
          color="#212b36"
          :loading="isLoading"
          @click="onLogin"
        >
          登录
        </el-button>
      </p>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { View, Hide } from '@/icons'
import { login } from '@/services/auth'

const username = ref('')
const password = ref('')

const { isShowPassword, onPasswordToggle, isLoading, onLogin } = login(username, password)
</script>

<style scoped lang="scss">
.image {
  max-width: 100%;
  height: auto;
}
</style>
